<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div>
  <h2>
    <span openlmis-message="label.equipment.inventory.manage"></span>
  </h2>
  <br>
  <div class="alert alert-success clearfix" ng-show="message">
    <span ng-bind="message"></span>
  </div>
  <div class="row-fluid">
    <div class="span12">
      <label openlmis-message="label.requisition.facilityType"></label>
    </div>
  </div>

  <div class="row-fluid">
    <div class="span2 form-inline">
      <input id="myFacilityRnr" type="radio" ng-model="selectedType" value="0" ng-checked="selectedType==0" ng-change="changeFacilityType();" />&nbsp;
      <label for="myFacilityRnr">
        <!--<strong openlmis-message="label.myFacility"></strong>-->
        {{facilityDisplayName}}
      </label>
    </div>
    <div class="span4 form-inline">
      <input id="supervisedFacilityRnr" type="radio" ng-model="selectedType" value="1" ng-checked="selectedType==1" ng-change="changeFacilityType();" />&nbsp;
      <label for="supervisedFacilityRnr">
        <strong openlmis-message="label.supervised.Facility"></strong>
      </label>
    </div>
  </div>
  <br/>

  <div ng-hide="programs.length == 1">
    <div class="row-fluid">
      <div class="span12">
        <label for="programList" openlmis-message="label.program"></label>
      </div>
    </div>
    <div class="row-fluid">
      <select class="span3" id="programList" ng-model="selectedProgram"
              ng-options="program.name for program in programs | orderBy:'name'" ng-change="changeProgram();">
        <option value=""></option>
      </select>
    </div>
    <br/>
  </div>

  <div ng-hide="programs.length == 1 && equipmentTypes.length == 1">
    <div class="row-fluid">
      <div class="span12">
        <label for="equipmentTypeList" openlmis-message="label.equipment.type"></label>
      </div>
    </div>
    <div class="row-fluid">
      <select class="span3" id="equipmentTypeList" ng-model="selectedEquipmentType"
              ng-options="equipmentType.name for equipmentType in equipmentTypes | orderBy:'name'" ng-change="loadInventory();">
        <option value=""></option>
      </select>
    </div>
    <br/>
  </div>

  <div ng-show="selectedProgram.id && selectedEquipmentType.id">
    <a ng-show="selectedType ==='0' || hasPermission('MANAGE_SUPERVISED_EQUIPMENTS')" id="add-new-equipment-type"
       ng-href="#/create/{{selectedType}}/{{selectedProgram.id}}/{{selectedEquipmentType.id}}/{{currentPage}}"
       class="pull-right btn btn-primary" openlmis-message="button.add.new"></a>

    <br/>
    <br/>
    <div ng-show="inventory.length == 0">
      <span openlmis-message="label.equipment.none.found"></span>
    </div>
    <div ng-show="inventory.length > 0">
      <table ng-show="selectedEquipmentType.coldChain == true" class="table table-bordered">
        <thead>
        <tr class="gradient-header">
          <th openlmis-message="label.equipment.region"></th>
          <th openlmis-message="label.equipment.district"></th>
          <th openlmis-message="label.equipment.facility"></th>
          <th><span openlmis-message="label.equipment.manufacturer"></span> /
            <span openlmis-message="label.equipment.model"></span></th>
          <th openlmis-message="label.equipment.fridge.freezer.capacity"></th>
          <th openlmis-message="label.equipment.status"></th>
          <th openlmis-message="label.equipment.energy.source"></th>
          <th openlmis-message="label.equipment.year.of.installation"></th>
          <th openlmis-message="label.equipment.age"></th>
          <th openlmis-message="label.equipment.replacement.year"></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in inventory">
          <td>{{item.facility.geographicZone.parent.name}}</td>
          <td>{{item.facility.geographicZone.name}}</td>
          <td>{{item.facility.name}}</td>
          <td><a ng-href="#/edit/{{selectedType}}/{{item.programId}}/{{selectedEquipmentType.id}}/{{item.id}}/{{currentPage}}">{{item.equipment.manufacturer}} / {{item.equipment.model}}</a></td>
          <td>{{item.equipment.refrigeratorCapacity ? item.equipment.refrigeratorCapacity : 0}} / {{item.equipment.freezerCapacity ? item.equipment.freezerCapacity : 0}}</td>
          <td>
            <select ui-select2 ng-model="item.operationalStatusId" ng-change="updateStatus(item)">
              <option value="{{status.id}}" ng-repeat="status in operationalStatusList | orderBy: 'displayOrder'"
                      ng-selected="status.id == item.operationalStatusId">{{status.name}}
              </option>
            </select>
            <br/>
            <span class="fadeout" ng-show="item.showSuccess == true"
                  openlmis-message="label.equipment.inventory.status.saved"></span>
          </td>
          <td>{{item.equipment.energyType.name}}</td>
          <td>{{item.yearOfInstallation}}</td>
          <td>{{getAge(item.yearOfInstallation)}}</td>
          <td>{{getReplacementYear(item.yearOfInstallation)}}</td>
        </tr>
        </tbody>
      </table>
      <table ng-show="selectedEquipmentType.coldChain != true" class="table table-bordered">
        <thead>
        <tr class="gradient-header">
          <th class="col-row-number">#</th>
          <th openlmis-message="label.equipment.equipment"></th>
          <th openlmis-message="label.equipment.manufacturer"></th>
          <th openlmis-message="label.equipment.model"></th>
          <th openlmis-message="label.equipment.source.of.fund"></th>
          <th ng-show="hasPermission('MANAGE_EQUIPMENT_SERVICING')" openlmis-message="label.equipment.actions"></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in inventory">
          <td>{{$index + 1}}</td>
          <td><a ng-href="#/edit/{{selectedType}}/{{item.programId}}/{{selectedEquipmentType.id}}/{{item.id}}/{{currentPage}}">{{item.equipment.name}}</a></td>
          <td>{{item.equipment.manufacturer}}</td>
          <td>{{item.equipment.model}}</td>
          <td>{{item.sourceOfFund}}</td>
          <td ng-show="hasPermission('MANAGE_EQUIPMENT_SERVICING')">
            <span class="btn-mini" ng-show="!item.isActive" openlmis-message="label.equipment.status.decommissioned"></span>
            <a ng-show="item.isActive" class="btn-mini btn-primary" ng-href="#/request/{{item.id}}?facilityId={{item.facility.id}}">
              <span openlmis-message="label.equipment.request.service"></span>
            </a>
            <a class="btn-mini btn-cont" ng-href="#/log/{{item.id}}">
              <span openlmis-message="label.equipment.request.logs"></span>
            </a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <pagination total-items="totalItems" page="currentPage" max-size="5" items-per-page="pagination.limit"
                direction-links="false" ng-show="inventory.length" class="pagination-sm"></pagination>
  </div>

</div>

<div id="notFunctionalDiv" modal="notFunctionalModal"
     options="{'backdrop':'static', 'escape':false}">
  <div class="modal-header">
    <h3>
      <span openlmis-message="label.equipment.choose.reason.for.not.function"></span>
    </h3>
  </div>

  <div class="modal-body">
    <form name="notFunctionalForm">
      <input type="hidden" ng-model="modalItem.operationalStatusId" id="operationalStatus" name="operationalStatus"
             ng-required="true" />
      <div class="form-row clearfix">
        <div class="form-cell">
          <label for="notFunctionalStatus">
            <span openlmis-message="label.equipment.cce.not.functional.status"></span>
            <span class="label-required">*</span>
          </label>
          <div class="form-field">
            <select style="width: 250px;" ui-select2 ng-model="modalItem.notFunctionalStatusId" id="notFunctionalStatus"
                    name="notFunctionalStatus" ng-required="true" ng-change="checkForBadFunctionalStatus(modalItem.notFunctionalStatusId)">
              <option value="{{status.id}}" ng-repeat="status in notFunctionalStatusList | orderBy: 'displayOrder'"
                      ng-selected="status.id == modalItem.notFunctionalStatusId">{{status.name}}
              </option>
            </select>
            <span class="field-error" ng-show="notFunctionalForm.notFunctionalStatus.$error.required && modalError"
                  openlmis-message="missing.value"></span>
          </div>
        </div>
      </div>

      <div ng-show="modalItem.badFunctionalStatusSelected">
        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="isActive">
              <input ng-model="modalItem.isActive" name="isActive" id="isActive" type="checkbox" />
              <span openlmis-message="label.equipment.is.active"></span>
            </label>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="dateDecommissioned">
              <span openlmis-message="label.equipment.date.decommissioned"></span>
            </label>
            <div class="form-field">
              <input ng-model="modalItem.dateDecommissioned" ng-disabled="modalItem.isActive"
                     name="dateDecommissioned" ui-date="{dateFormat: 'dd/mm/yy', changeYear: true}"
                     ui-date-format="yy-mm-dd" id="dateDecommissioned">
                <span class="field-error" ng-show="notFunctionalForm.dateDecommissioned.$error.required && modalError"
                      openlmis-message="missing.value"></span>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="modal-footer">
    <input type="button" class="btn btn-primary save-button" openlmis-message="button.save"
           ng-click="saveModal()" value="Save"/>
    <input type="button" class="btn btn-cancel" openlmis-message="button.cancel"
           ng-click="closeModal()" value="Cancel"/>
    <div class="toolbar-error" id="saveErrorMsgDiv" ng-bind="modalError" ng-show="modalError"></div>
  </div>
</div>
